Establish a spacing and sizing system 建立間距和尺寸系統

設計UI時，不要在相近的數值（比如120px和125px）之間反覆糾結。這樣不僅浪費時間，還可能導致設計看起來不協調。更好的方法是：提前設定一組固定的數值，然後只使用這些數值。

A linear scale won’t work 為什麼簡單的線性間距不夠好？
用"所有尺寸都是4px的倍數"這樣簡單的規則是不夠的。這樣並不能幫你在120px和125px之間做選擇。關鍵是要考慮不同尺寸之間的比例關係：

• 對小尺寸來說（比如圖示或按鈕內邊距），幾個畫素的差別影響很大。比如從12px變成16px，增加了33%！

  

• 但對大尺寸來說（比如卡片寬度），幾個畫素基本看不出差別。比如從500px變成520px，只增加了4%。

  

建議：設計時，相鄰兩個尺寸之間至少要相差25%，這樣選擇起來會更容易。

Defining the system 建立系統

1. 選擇一個基準數值作為起點

2. 用這個數值的倍數來建立尺寸體系

16px是個很好的起點，因為它容易計算，而且正好是大多數瀏覽器的預設字型大小。小尺寸之間的間隔要小一些，隨著尺寸增大，間隔也要逐漸變大。

Using the system 用了這個系統後會怎樣？

• 設計速度會更快，特別是在瀏覽器中直接輸入數值時

• 不用反覆嘗試，通常試兩個相鄰的值就能找到合適的尺寸

• 整體設計會更協調、更整潔

總的來說，一個好的間距和尺寸系統能幫你更輕鬆、更快速地做出更好的設計。這就是為什麼它如此重要。